<template>

  <div class="box">
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
      <el-row>
        <el-col :span="24">
          <h2 class="title">新生报到芜湖~skr</h2><br><br><br>
        </el-col>

        <el-col :span="18" :offset="3">
          <el-form-item prop="loginName">
            <el-input
                v-model="loginForm.loginName"
                type="text"
                auto-complete="off"
                placeholder="账号"
            >
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
              <!--          <span slot="prefix" class="iconfont icon-head_icon input-icon" />-->
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18" :offset="3">
          <el-form-item prop="password">
            <el-input
                v-model="loginForm.password"
                type="password"
                auto-complete="off"
                placeholder="密码"
            >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              <!--          <span slot="prefix" class="iconfont icon-password input-icon" />-->
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18" :offset="3">
          <el-form-item style="width:100%;">
            <el-button
                :loading="loading"
                size="medium"
                type="primary"
                style="width:100%;"
                @click.native.prevent="stuLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>



    </el-form>
  </div>
</template>

<script>
export default {
  name: "stuLogin",
  data() {
    return {
      loginForm: {
        loginName: "2110010101",
        password: "240116",
        uuid: ""
      },

      loginRules: {
        loginName: [
          { required: true, trigger: "blur", message: "用户名不能为空" }
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" }
        ],
      },
      loading: false,
      redirect: undefined
    }
  },
  methods: {
    stuLogin() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return;
        this.loading = true
        const { data:res } = await this.$http.post("stuLogin", this.loginForm);
        // console.log(res)
        if (res.code !== 200 || res.data == null || res.data == '' || res.data == 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }

        window.sessionStorage.setItem("user", JSON.stringify(res.data));
        this.user = JSON.parse(window.sessionStorage.getItem("user"));
        this.$router.push("/homePage")

        this.$notify({
          message: '欢迎登录',
          type: 'success'
        });
      });
    }
  }
}
</script>

<style lang="less" scoped>

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/sj1.png");
  background-size: cover;
}
.login-form {

}
.title {
  color: white;
}
</style>
